<template>
  <div class="lg:gap-6 flex flex-col gap-3" v-if="!!products.length">
    <div class="flex justify-between items-center">
      <div class="flex items-center">
        <h2 class="font-bold lg:text-[20px] text-[#09090B] text-[1rem] capitalize">
          {{ $t('pages.discount') }}
        </h2>
      </div>
      <nuxt-link
        :prefetch="false"
        :to="localePath('/sales')"
        class="py-2 px-4 bg-[#f7f7f7] rounded-full border flex justify-center items-center cursor-pointer"
      >
        <span class="font-bold text-[12px] text-[#121212] capitalize"> {{ $t('pages.viewAll') }}</span>
      </nuxt-link>
    </div>
    <div class="lg:grid-cols-4 lg:grid-rows-2 lg:gap-6 max-lg:flex max-lg:flex-col grid gap-3">
      <nuxt-link
        :prefetch="false"
        :style="'background-image: url(' + $globalFn.imgPrefixUrl(products[0]?.image || '', 'discount') + ')'"
        :to="localePath(`/product/${products[0].code}`)"
        class="col-span-1 row-span-2 cursor-pointer rounded-[1rem] border overflow-hidden bg-top bg-cover bg-no-repeat flex size-full justify-end flex-col max-lg:aspect-square"
      >
        <div class="bg-gradient-to-b from-black/0 to-[#000] flex flex-col gap-2 p-3 w-full">
          <h3 class="font-bold text-[16px] text-white line-clamp-1">
            {{ products[0]?.goods_name || '' }}
          </h3>
          <div class="font-medium text-[12px] text-[rgba(255,255,255,0.7)] line-clamp-1">
            {{ products[0]?.sku[0].title || '' }}
          </div>
          <div class="flex gap-2 items-center">
            <div class="px-2 bg-[#FF4E33] rounded-[0px_4px_0px_4px] flex justify-center items-center">
              <span class="font-bold text-[.875rem] text-white after:content-['%'] after:text-[.75rem]">
                -{{ products[0]?.sku[0]?.discount || 0 }}</span
              >
            </div>
            <span class="font-bold text-[24px] text-white">
              {{ products[0]?.sku[0]?.currency_symbol || '' }}{{ products[0]?.sku[0]?.price_text || '' }}
            </span>
          </div>
        </div>
        <div class="px-4 py-2 bg-[#3F3F46] rounded-[0px_0px_8px_8px] backdrop-blur-[12px] flex justify-between items-center">
          <h3 class="font-bold lg:text-[1rem] text-[.75rem] text-white line-clamp-1">
            {{ products[0]?.goods_name }}
          </h3>
          <div class="flex gap-2 items-center">
            <div class="times">{{ hours.padStart(2, '0') }}</div>
            <div class="text-white">:</div>
            <div class="times">{{ minutes.padStart(2, '0') }}</div>
            <div class="text-white">:</div>
            <div class="times">{{ seconds.padStart(2, '0') }}</div>
          </div>
        </div>
      </nuxt-link>
      <div class="max-lg:flex max-lg:gap-3 max-lg:overflow-x-scroll lg:col-span-3 lg:row-span-2 lg:grid lg:grid-cols-3 lg:gap-5 overflow-hidden">
        <nuxt-link
          :prefetch="false"
          v-for="(i, k) in [...products.slice(1, 7)]"
          :key="k"
          :to="localePath(`/product/${i.code}`)"
          :style="'background-image: url(' + $globalFn.imgPrefixUrl(i.image || '', 'goods_thumb_1_1') + ')'"
          class="max-lg:flex-none max-lg:w-3/4 max-lg:aspect-[16/8] group overflow-hidden relative col-span-1 cursor-pointer rounded-[1rem]"
        >
          <div class="absolute inset-0 size-full backdrop-blur-[2.5rem] rounded-[1rem]"></div>
          <div class="size-full absolute inset-0">
            <img src="https://cd.sealmg.com/assets/img/touming.png" class="size-full object-cover" alt="touming.png" title="touming.png" />
          </div>
          <div class="size-full flex absolute inset-0 flex-col justify-end">
            <div class="bg-black/20 w-full h-2/3 rounded-[1rem]"></div>
          </div>
          <div class="bg-black/20 size-full flex flex-col p-4">
            <div class="flex flex-col justify-between h-full">
              <div class="flex justify-between w-full">
                <div class="size-16 rounded-[8px] flex-none overflow-hidden z-40">
                  <img
                    :src="$globalFn.imgPrefixUrl(i.image || '', 'goods_thumb_1_1')"
                    :alt="i?.goods_name || ''"
                    :title="i?.goods_name || ''"
                    class="group-hover:scale-110 size-full object-cover transition-all duration-300"
                  />
                </div>
                <div class="z-40" v-if="i.sku[0].discount">
                  <div class="px-2 bg-gradient-to-b from-[#ED8B26] to-[#E92F1F] rounded-[0rem_0.5rem_0rem_0.5rem] flex items-center py-[5px]">
                    <div class="text-white text-[0.75rem] font-bold leading-none">-{{ i.sku[0].discount }}%</div>
                  </div>
                </div>
              </div>
              <h3 class="font-bold text-[12px] text-white line-clamp-1 z-40 lg:mt-2">
                {{ i?.goods_name || '' }}
              </h3>
              <div class="font-medium text-[12px] text-white/80 line-clamp-1 z-40">
                {{ i?.sku[0]?.title }}
              </div>
            </div>
          </div>
        </nuxt-link>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'DiscountSection',
    props: {
      products: {
        type: Array,
        default: () => []
      },
      hours: {
        type: String,
        default: '00'
      },
      minutes: {
        type: String,
        default: '00'
      },
      seconds: {
        type: String,
        default: '00'
      }
    }
  }
</script>
<style lang="less" scoped>
  .times {
    @apply bg-[#FFFFFF] rounded-[0.25rem] lg:size-[2rem] size-[1.5rem] flex justify-center items-center font-bold lg:text-[1rem] text-[.75rem] text-[#FF4E33];
  }
</style>
